import React, { memo, useEffect } from "react";
import HomeWrapper from "./style";
import HomeBanner from "./c-cpns/home-banner";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getAsyncGoodPriceAction } from "@/store/modules/home";
import HomeSctionV1 from "../home/c-cpns/home-section-v1";
import HomeSectionV2 from "./c-cpns/home-section-v2";
import HomeSctionV3 from "./c-cpns/home-section-v3";
import { isEmptyObj } from "@/utils/is-empty-obj";
import HomeLongFor from "./c-cpns/home-longfor";

export default memo(function HomeComponent() {
  const dispath = useDispatch();
  useEffect(() => {
    dispath(getAsyncGoodPriceAction());
  }, [dispath]);

  const {
    goodPriceInfo,
    highScoreInfo,
    discountInfo,
    homeRecommandInfo,
    longForInfo,
    homePlusInfo,
  } = useSelector((state) => {
    return {
      goodPriceInfo: state.home.goodPriceInfo,
      highScoreInfo: state.home.highScoreInfo,
      discountInfo: state.home.discountInfo,
      homeRecommandInfo: state.home.homeRecommandInfo,
      longForInfo: state.home.longForInfo,
      homePlusInfo: state.home.homePlusInfo,
    };
  }, shallowEqual);

  return (
    <HomeWrapper>
      <HomeBanner />
      <div className="content">
        {!isEmptyObj(discountInfo) && (
          <HomeSectionV2 roomListInfoObj={discountInfo} />
        )}
        {!isEmptyObj(homeRecommandInfo) && (
          <HomeSectionV2 roomListInfoObj={homeRecommandInfo} />
        )}
        {!isEmptyObj(longForInfo) && (
          <HomeLongFor roomListInfoObj={longForInfo} />
        )}
        {!isEmptyObj(goodPriceInfo) && (
          <HomeSctionV1 roomListInfoObj={goodPriceInfo} />
        )}
        {!isEmptyObj(highScoreInfo) && (
          <HomeSctionV1 roomListInfoObj={highScoreInfo} />
        )}
        {!isEmptyObj(homePlusInfo) && (
          <HomeSctionV3 roomListInfoObj={homePlusInfo} />
        )}
      </div>
    </HomeWrapper>
  );
});
